<template >
	<div class="contain-report">
		<div class="report-title">实验指导测评管理</div>
		<div class="report-table">
			<div class="table-header">
				<div class="table-box">培训名称</div>
				
				<div class="table-box">操作</div>
			</div>
			<div class="tab-body">
				<div class="table-list" v-for="item in 5" :key="item">
					<div class="list-show">保鲜技术</div>
					<div class="list-show">
						<el-button type="text">查看</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="3"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="sizes, prev, pager, next, jumper"
					:total="400">
			</el-pagination>
		</div>
	</div>
</template >

<script >
    export default {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
			margin-bottom: 30px;
		}
		.report-table{
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			.table-header{
				width: 100%;
				height: 40px;
				background-color: #7fd1e5;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.table-box{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
			}
			.tab-body{
				width: 100%;
				background-color: #ffffff;
				padding: 20px;
				box-sizing: border-box;
				border-radius: 20px;
				.table-list{
					margin: 10px 0;
					width: 100%;
					padding-bottom: 10px;
					box-sizing: border-box;
					border-bottom: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.list-show{
						width: 50%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
